<template>
	<view class="wui-readMore" :style="[!show ? heightComputed : {}]">
		<slot></slot>
		<view class="mask-height" :style="[!show ? heightComputed : {}]"></view>
		<view class="readMore-show" :style="[showTextColorComputed]" v-if="!show" @click="$emit('change')">
			<text>{{ showText }}</text>
			<text class="iconfont icon-wui-down"></text>
		</view>
		<view class="readMore-hidd" :style="[hiddTextColorComputed]" v-else @click="$emit('change')">
			<text>{{ hiddText }}</text>
			<text class="iconfont icon-wui-up"></text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'w-readMore',
	props: {
		height: {
			type: [String, Number],
			default: 400
		},
		showText: {
			type: String,
			default: '展开阅读全文'
		},
		showTextColor: {
			type: String,
			default: '#0055ff'
		},
		hiddText: {
			type: String,
			default: '收起'
		},
		hiddTextColor: {
			type: String,
			default: '#0055ff'
		},
		show: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		heightComputed() {
			return {
				'--height': uni.upx2px(this.height) + 'px'
			};
		},
		showTextColorComputed() {
			return {
				'--show-text-color': this.showTextColor
			};
		},
		hiddTextColorComputed() {
			return {
				'--hidd-text-color': this.hiddTextColor
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-readMore {
	overflow: hidden;
	height: var(--height);
	position: relative;
	.mask-height {
		position: absolute;
		width: 100%;
		bottom: 0;
		height: var(--height);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%);
	}
	.readMore-show,
	.readMore-hidd {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.iconfont {
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}
	.readMore-show {
		position: absolute;
		bottom: 0;
		color: var(--show-text-color);
	}
	.readMore-hidd {
		color: var(--hidd-text-color);
	}
}
</style>
